<template>
  <div class="container">
    <div class="toolbar" style="float:left;">
      <el-form :inline="true" ref="dataForm" :model="dataForm" :size="size" label-width="120px">
            <el-form-item label="商户名称" prop="merchantName">
                <el-input v-model="dataForm.merchantName"></el-input>
            </el-form-item>
            <el-form-item label="商户code" prop="merchantCode" label-width="120px">
                <el-input v-model="dataForm.merchantCode" ></el-input>
            </el-form-item>
            <el-form-item label="订单编号" prop="orderNo">
                <el-input v-model="dataForm.orderNo"></el-input>
            </el-form-item>
            <el-form-item label="第三方订单时间" prop="buyTime">
                <el-input v-model="dataForm.buyTime" placeholder="订单编号" clearable></el-input>
               <!--   <el-form-item prop="date">
                    <el-date-picker type="date" v-model="dataForm.buyTime" placeholder="下单时间" style="width: 180px;"></el-date-picker>
                </el-form-item> -->
            </el-form-item>
         
            <el-form-item label="订单类型" prop="orderTypeb">
                <el-select v-model="dataForm.orderTypeb" placeholder="全部" style="width:160px" clearable>
                    <el-option label="积分订单" value="1"></el-option>
                    <el-option label="普通订单" value="2"></el-option>                
                </el-select>
            </el-form-item>
            <el-form-item label="来源渠道" prop="sources">
                <el-select v-model="dataForm.sources" placeholder="全部" style="width:160px" clearable>
                    <el-option label="APP" value="1"></el-option>
                    <el-option label="商城小程序" value="2"></el-option> 
                    <el-option label="企业微信" value="3"></el-option>     
                    <el-option label="We2000公众号" value="4"></el-option>
                    <el-option label="商城公众号" value="5"></el-option>   
                      <el-option label="其他" value="6"></el-option>                 
                </el-select>
            </el-form-item>
             <el-form-item label="活动来源" prop="orderSources">
                <el-select v-model="dataForm.orderSources" placeholder="全部" style="width:160px" clearable>
                    <el-option label="拼团" value="1"></el-option>
                    <el-option label="秒杀" value="2"></el-option> 
                    <el-option label="预售" value="3"></el-option>     
                    <el-option label="抽奖" value="4"></el-option>                           
                </el-select>
            </el-form-item>
            <el-form-item label="收货人" prop="buyerRealname" label-width="120px">
                <el-input v-model="dataForm.buyerRealname" ></el-input>
            </el-form-item>
            <el-form-item label="收货人手机号" prop="consigneePhone" label-width="120px">
                <el-input v-model="dataForm.consigneePhone" ></el-input>
            </el-form-item>
            <el-form-item label="收货人地址" prop="" label-width="100px">
                <v-distpicker
                  :province="dataForm.addressProvinceName"
                  @province="changeProvince"
                  :city="dataForm.addressCityName"
                  @city="changeCity"
                  :area="dataForm.addressAreaName"
                  @area="changeArea">
                </v-distpicker>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsName" label-width="120px">
                <el-input v-model="dataForm.goodsName" ></el-input>
            </el-form-item>
            <el-form-item label="商品编码" prop="commodityCode" label-width="120px">
                <el-input v-model="dataForm.commodityCode" ></el-input>
            </el-form-item>
            <el-form-item prop="buyerId" label="会员手机号" label-width="120px">
                <el-input v-model="dataForm.tel" ></el-input>
            </el-form-item>
             <el-form-item prop="waybillNumber" label="运单编号" label-width="120px">
                <el-input v-model="dataForm.waybillNumber" ></el-input>
            </el-form-item>
            <el-form-item label="发货日期" prop="deliveryDate" label-width="120px">              
                 <el-form-item prop="date">
                    <el-date-picker type="date" v-model="dataForm.deliveryDate" placeholder="发货时间" style="width: 180px;"></el-date-picker>
                </el-form-item>
            </el-form-item>
            <el-form-item label="支付方式" prop="payment" label-width="120px">
                <el-select v-model="dataForm.payment" placeholder="全部" style="width:160px" clearable>
                    <el-option label="微信分期" value="1"></el-option>
                    <el-option label="We2000" value="2"></el-option> 
                    <el-option label="微信支付" value="3"></el-option>     
                    <el-option label="微信银行储蓄卡" value="4"></el-option>                           
                </el-select>
            </el-form-item>
             <el-form-item label="是否需要开发票" prop="whetherInvoice" label-width="120px">
                <el-select v-model="dataForm.whetherInvoice" placeholder="全部" style="width:160px" clearable>
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>                                          
                </el-select>
            </el-form-item>
            <el-form-item label="结算状态" prop="balanceSts" label-width="120px">
                <el-select v-model="dataForm.balanceSts" placeholder="全部" style="width:160px" clearable>
                    <el-option label="未结算" value="1"></el-option>
                    <el-option label="已清算" value="2"></el-option> 
                    <el-option label="轧差中" value="3"></el-option>     
                    <el-option label="已轧差" value="4"></el-option>                           
                </el-select>
            </el-form-item>
             <el-form-item label="订单标签" prop="orderTag">
                <el-select v-model="dataForm.orderTag" style="width:160px" placeholder="全部" clearable>
                    <el-option v-for="item in orderTagData" :key="item.code" :label="item.message" :value="item.code"></el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item label="购买方式" prop="buyerRealname" label-width="120px">
                 <el-select v-model="dataForm.orderTag" style="width:160px" placeholder="全部" clearable>
                    <el-option label="邮寄" value="0"></el-option>
                    <el-option label="线下自提" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="下单时间">
                <el-form-item prop="date">
                    <el-date-picker type="date" v-model="dataForm.buyTimeStart" placeholder="下单日期开始时间" style="width: 180px;"></el-date-picker>
                </el-form-item>
                <span class="dater">-</span>
                <el-form-item prop="date" style="width: 180px;">
                    <el-date-picker type="date" v-model="dataForm.buyTimeEnd" placeholder="下单日期开始时间"></el-date-picker>
                </el-form-item>
            </el-form-item>

        <div class="search-button button20">
          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="submitForm('dataForm')"></kt-button>
            <kt-button icon="el-icon-refresh" :label="$t('action.reset')" @click="resetForm"></kt-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="tab-container">
      <el-col :span="24">
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane
            v-for="item in tabMapOptions"
            :key="item.code"
            :label="item.message"
            :name="item.code.toString()"
          >
            <tabPane
              v-if="activeName==item.code"
              :type="item.code.toString()"
              :parentFilters="dataForm"
              @check="check"
              ref="tabPaneChild"
            ></tabPane>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    <!--   <el-dialog title="订单合并" :visible.sync="orderMergeVisible">
        <tabPaneMerge ref="tabPaneMerge" :parentFilters="dataForm" @closeDialog="orderMergeVisible=false" @mergeOrder="mergeOrder"></tabPaneMerge>
      </el-dialog> -->
    </div>
  </div>
</template>

<script>
import orderDeliveryDetailsTow from "./component/OrderDeliveryDetailsTow.vue";
import tabPane from "./component/TabPaneOrderDelivery.vue";
import tabPaneMerge from "./component/TabPaneOrderDeliveryMerge.vue";
import KtButton from "@/views/Core/KtButton";
import VDistpicker from "v-distpicker";

export default {
  components: {
    tabPane,
    KtButton,
    VDistpicker,
    orderDeliveryDetailsTow,
    tabPaneMerge,
  },

  data() {
    return {
      orderMergeVisible: false,
      size: "mini",

      //订单发送详情初始化数据;
      orderDeliveryDetail: {},

      //Tab标签页的默认选项;
      tabMapOptions: [
        { code: 0, message: "全部" },
        { code: 3, message: "待发货" },
        { code: 4, message: "已发货" },
      ],
      activeName: "0", //激活的Tab 页的Id

        //配送方式下拉选项;
        mOrderDeliveryTypeOption: [],
        dialogVisible1: false,//详情的对话框,默认关闭;
        currentPage: 1,

        // 搜索框表单;
        dataForm: {
          temp: null,//假的
          dataFormEdit: false,//
          orderNo: "",
          goodsId: "",
          warehouseName:"",
          orderStatus: null,
          storeName: "",
          sellersName: "",
          orderMemberAccountNumber: "",
          receiverPhone: "",
          receiverName: "",
          deliverWay: "",
          outOrderCode: "",
          merchantName: "",
          receiverProvinceId: '',
          receiverCityId: '',
          receiverCountryId: '',
          deliveryType: "",
          buyTime:null,
          deliveryTime:null,
          startBuyTime: null,//交货单创建时间-开始
          endBuyTime: null,//交货单创建时间-结束
          deliveryTimeStart: null,//交货单创建时间-开始
          deliveryTimeEnd: null,//交货单创建时间-结束
        },

        //搜索条件 form表单,字段校验规则;
        rules: {
          orderCode: [
            {required: false, message: "请输入订单编号", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
          ],
          sellersName: [
            {required: false, message: "请输入销售店铺名称", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
          ],
          orderMemberAccountNumber: [
            {required: false, message: "请输入下单会员账号", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
          ],
          receiverPhone: [
            {required: false, message: "请输入下单会员账号", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
          ],
          receiverName: [
            {required: false, message: "请输入收货人", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
          ],
          deliverWay: [
            {required: false, message: "请输入配送商", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
          ],
          outOrderCode: [
            {required: false, message: "请输入外部订单编号", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
          ],
          startBuyTime: [
            {
              type: "date",
              required: true,
              message: "请选择日期",
              trigger: "change"
            }
          ],
          endBuyTime: [
            {
              type: "date",
              required: true,
              message: "请选择时间",
              trigger: "change"
            }
          ],
          deliveryTimeStart: [
            {
              type: "date",
              required: true,
              message: "请选择日期",
              trigger: "change"
            }
          ],
          deliveryTimeEnd: [
            {
              type: "date",
              required: true,
              message: "请选择时间",
              trigger: "change"
            }
          ],
        },
      };
    },

  methods: {
    mergeOrder(row) {
       this.$refs.tabPaneMerge.refreshPageRequest(1);
      this.$router.push({ path: "/OrderDeliveryDetails/" ,params:{row:row}});
    },
    closeDialog() {
      this.orderMergeVisible = false;
    },
    mergeOrderDelivery() {
      this.orderMergeVisible = true;
    },
    resetForm() {
      (this.dataForm = {
        temp: null, //假的
        dataFormEdit: false,
        orderNo: "",
        goodsId: "",
        orderStatus: null,
        storeName: "",
        sellersName: "",
        warehouseName: "",
        orderMemberAccountNumber: "",
        receiverPhone: "",
        receiverName: "",
        deliverWay: "",
        outOrderCode: "",
        merchantName: "",
        receiverProvinceId: "",
        receiverCityId: "",
        receiverCountryId: "",
        deliveryType: "",
        startBuyTime: null, //交货单创建时间-开始
        endBuyTime: null, //交货单创建时间-结束
        deliveryTimeStart: null, //交货单创建时间-开始
        deliveryTimeEnd: null, //交货单创建时间-结束
      }),
        (this.dataForm.receiverProvinceId = "");
      this.dataForm.receiverCityId = "";
      this.dataForm.receiverCountryId = "";
      this.dataForm.merchantName = "";
      this.submitForm(this.dataForm); //重置数据后,查询列表
    },

      /***
       * 提交数据,开始查询
       * */
      submitForm(dataForm) {
        if(this.dataForm.buyTime!=null){
          this.dataForm.startBuyTime=this.dataForm.buyTime[0]
          this.dataForm.endBuyTime=this.dataForm.buyTime[1]
        }
        if(this.dataForm.deliveryTime!=null){
          this.dataForm.deliveryTimeStart=this.dataForm.deliveryTime[0]
          this.dataForm.deliveryTimeEnd=this.dataForm.deliveryTime[1]
        }
        /*这里提交时,调用子组件 tabPaneChild 中的数据*/
        this.$refs.tabPaneChild[0].refreshPageRequest(1);
      },

      /***
       * 处理多选变化
       * */
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      /***
       *处理大小变化
       * */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },

      /***
       * 处理当前页变化
       * */
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

      /***
       * 省市县联动
       * */
      selectContact(data) {
        this.dataForm.receiverProvinceId = data.province.value;
        this.dataForm.receiverCityId = data.city.value;
        this.dataForm.receiverCountryId = data.area.value
      },

      /***
       * 查看详情
       * */
      check(row) {
        this.orderDeliveryDetail = row.row;this.$router.push({path: '/OrderDeliveryDetails/' + row.row.deliverNo});
      },

      /***
       * 发
       * */
      delivery(row) {
        this.orderDeliveryDetail = row.row;
        this.$router.push({
          path: '/OrderDeliveryDetails2/' + row.row.deliverNo
        });
      },

      /***
       * 关闭对话框
       * */
      close() {
        this.$refs.tabPaneChild[0].refreshPageRequest(1);
        this.dialogVisible1 = false
      },

      /***
       * 获取配送方式类型下拉选项;
       */
      listMOrderDeliveryTypeOption() {
        this.utils.request.listMOrderDeliveryTypeOption(null, res => {
          if (res.code === "0000") {
            res.data.rows.forEach((item) => {
              const item2 = {value: item.deliveryCode, label: item.deliveryType};
              this.mOrderDeliveryTypeOption.push(item2)
            });
          } else {
            console.log("没有查询到对应的[配送方式]列表");
          }
        })
      },
    },

	  watch: {
		  activeName(val) {
			  this.$router.push(`${this.$route.path}?tab=${val}`)
		  }
	  },

	  created() {
		  this.listMOrderDeliveryTypeOption(null)
		  const tab = this.$route.query.tab
		  if (tab) {
			  this.activeName = tab
		  }
	  }
  };
</script>

<style scoped lang="scss">
  /* 搜索条件样式统一 */
.toolbar /deep/ .el-form-item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 15px;
}

.toolbar /deep/ .el-input__inner {
    height: 32px;
    line-height: 32px;
}

.toolbar /deep/ .el-form-item__label {
    height: 32px;
    line-height: 32px;
}

.spec /deep/ .el-input__inner {
    padding-right: 0;
}

.el-input {
    width: 160px !important;
    height: 32px;
    line-height: 32px;
}

.el-date-editor {
    width: 160px !important;
}

.container {
    padding-top: 10px;
    width: 100%;
    height: 100%;
}

  /* 设置本页面的日期选择组件样式 */
  .distpicker-address-wrapper /deep/ select {
    width: 110px;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
  }
</style>
